import React, { PureComponent } from 'react';

import { Form, Tag, Button, Select, Icon, DatePicker } from 'antd';

import styles from './index.css';

const { CheckableTag } = Tag;

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1943299_pubiuz51khp.js', 
});

const Collapse = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1962383_fy41juoutxb.js',
});

const { Option } = Select;
const { RangePicker } = DatePicker;

/**
 * 数据统计: 查询表单
 */
class Index extends PureComponent {
  constructor (props) {
    super (props)
  }
  state = { 
    dayChecked: true, 
    weekChecked: false,
    monthChecked: false,
    halfAYearChecked: false,
    yearChecked: false,
    customChecked: false,
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <div className={styles.enquiry_form}>
        <Form
          onSubmit={this.formSubmittedHandler}>
          <table>
            <tbody>
              <tr>
                <td>
                <Form.Item>
                  {
                    getFieldDecorator('time', {
                      
                    })(
                      <div>
                        <CheckableTag {...this.props} checked={this.state.dayChecked} onChange={this.dayHandleChange}>日</CheckableTag>
                        <CheckableTag {...this.props} checked={this.state.weekChecked} onChange={this.weekHandleChange}>周</CheckableTag>
                        <CheckableTag {...this.props} checked={this.state.monthChecked} onChange={this.monthHandleChange}>月</CheckableTag>
                        <CheckableTag {...this.props} checked={this.state.halfAYearChecked} onChange={this.halfAYearHandleChange}>半年</CheckableTag>
                        <CheckableTag {...this.props} checked={this.state.yearChecked} onChange={this.yearHandleChange}>年</CheckableTag>
                        <CheckableTag {...this.props} checked={this.state.customChecked} onChange={this.customHandleChange}>自定义</CheckableTag>
                      </div> 
                    )
                  }
                </Form.Item>
                </td>
                <td style={{
                    display: this.state.customChecked == false ?   
                      'none'
                        :
                      ''
                }}>
                <Form.Item>
                  {
                    getFieldDecorator('startTime', {
                      // initialValue: moment('2020-12-20', 'YYYY-MM-DD'),
                    })(
                      <DatePicker size='default' allowClear placeholder='请选择开始时间' className={styles.timeSelector} />
                    )
                  }
                </Form.Item>
              </td>
                <td style={{
                    display: this.state.customChecked == false ?   
                      'none'
                        :
                      ''
                }}>
                  <Form.Item>
                    {
                      getFieldDecorator('endTime', {
                        // initialValue: moment('2020-12-20', 'YYYY-MM-DD'),
                      })(
                        <DatePicker size='default' allowClear placeholder='请选择结束时间' className={styles.timeSelector} />
                      )
                    }
                  </Form.Item>
                </td>
                <td className={styles.enquiry_form_btn}>
                  <Form.Item>
                    <Button type="primary" htmlType="submit" className={styles.query}>
                      <IconFont type="icon-tubiao-" /> 查询
                    </Button>
                    <Button htmlType="button" onClick={this.formResetHandler} className={styles.reset}>
                      <IconFont type="icon-zhongzhi" /> 重置
                    </Button>
                  </Form.Item>
                </td>
              </tr>
            </tbody>
          </table>
        </Form>
      </div>
    )
  }
  /**
   * 日标签点击事件
   */
  dayHandleChange = () => {
    this.setState({
      dayChecked : true, 
      weekChecked : false,
      monthChecked : false,
      halfAYearChecked : false,
      yearChecked : false,
      customChecked : false,
    });

    const getBeforeDate = (days) => {
      let now=new Date().getTime();
      let ago=now-86400000*days;//一天的毫秒数为86400000
      let agoData= new Date(ago);
      let year = agoData.getFullYear();
      let mon = agoData.getMonth() + 1;
      let day = agoData.getDate();
      let date=year+'/'+mon+'/'+day;
      return date;
    };
    //获取当前时间的日期
    console.log(getBeforeDate(1));
    //获取当前时间的日期 格式: 2021/2/7
    console.log(new Date().toLocaleDateString());    
  };

  /**
   *  周标签点击事件
   */
  weekHandleChange = () => {
    this.setState({ 
      dayChecked : false, 
      weekChecked : true,
      monthChecked : false,
      halfAYearChecked : false,
      yearChecked : false,
      customChecked : false, 
    });
    const getBeforeDate = (days) => {
      let now=new Date().getTime();
      let ago=now-86400000*days;//一天的毫秒数为86400000
      let agoData= new Date(ago);
      let year = agoData.getFullYear();
      let mon = agoData.getMonth() + 1;
      let day = agoData.getDate();
      let date=year+'/'+mon+'/'+day;
      return date;
    };
    //获取当前时间的前六天的日期
    console.log(getBeforeDate(6));
    //获取当前时间的日期 格式: 2021/2/7
    console.log(new Date().toLocaleDateString());      
  };

  /**
   *  月标签点击事件
   */
  monthHandleChange = () => {
    this.setState({
      dayChecked : false, 
      weekChecked : false,
      monthChecked : true,
      halfAYearChecked : false,
      yearChecked : false,
      customChecked: false,  
    });
    const getBeforeDate = (days) => {
      let now=new Date().getTime();
      let ago=now-86400000*days;//一天的毫秒数为86400000
      let agoData= new Date(ago);
      let year = agoData.getFullYear();
      let mon = agoData.getMonth() + 1;
      let day = agoData.getDate();
      let date=year+'/'+mon+'/'+day;
      return date;
    };
    //获取当前时间的前31天的日期
    console.log(getBeforeDate(31));   
    //获取当前时间的日期 格式: 2021/2/7
    console.log(new Date().toLocaleDateString());       
  };

  /**
   *  半年标签点击事件
   */
  halfAYearHandleChange = () => {
    this.setState({
      dayChecked : false, 
      weekChecked : false,
      monthChecked : false,
      halfAYearChecked : true,
      yearChecked : false,
      customChecked : false, 
    });
    const getBeforeDate = (days) => {
      let now=new Date().getTime();
      let ago=now-86400000*days;//一天的毫秒数为86400000
      let agoData= new Date(ago);
      let year = agoData.getFullYear();
      let mon = agoData.getMonth() + 1;
      let day = agoData.getDate();
      let date=year+'/'+mon+'/'+day;
      return date;
    };
    //获取当前时间的前半年(183)的日期
    console.log(getBeforeDate(183));  
    //获取当前时间的日期 格式: 2021/2/7
    console.log(new Date().toLocaleDateString());    
  };

  /**
   *  年标签点击事件
   */  
  yearHandleChange = () => {
    this.setState({
      dayChecked : false, 
      weekChecked : false,
      monthChecked : false,
      halfAYearChecked : false,
      yearChecked : true,
      customChecked : false, 
    });
    const getBeforeDate = (days) => {
      let now=new Date().getTime();
      let ago=now-86400000*days;//一天的毫秒数为86400000
      let agoData= new Date(ago);
      let year = agoData.getFullYear();
      let mon = agoData.getMonth() + 1;
      let day = agoData.getDate();
      let date=year+'/'+mon+'/'+day;
      return date;
    };
    //获取当前时间的前一年的日期
    console.log(getBeforeDate(365));  
    //获取当前时间的日期 格式: 2021/2/7
    console.log(new Date().toLocaleDateString());
  };

  /**
   *  自定义标签点击事件
   */ 
  customHandleChange = () => {
    this.setState({
      dayChecked : false, 
      weekChecked : false,
      monthChecked : false,
      halfAYearChecked : false,
      yearChecked : false,
      customChecked : true, 
    });
  };


  /**
   * 查询表单成功回调事件
   */
  formSubmittedHandler = (event) => {
    // 关闭表单的默认提交行为
    event.preventDefault();

    // 获取表单域数据
    const fieldsValue = this.props.form.getFieldsValue();

    // 整理表单数据
    const inputJSON = {};

    // 状态
    const status = !!fieldsValue['status']? fieldsValue['status'] : '';
    Object.assign(inputJSON, { status })
    // 姓名
    const name = !!fieldsValue['name']? fieldsValue['name'] : '';
    Object.assign(inputJSON, { name })
    // 账号
    const accountNum = !!fieldsValue['accountNum']? fieldsValue['accountNum'] : '';
    Object.assign(inputJSON, { accountNum })
    !!this.props.onSubmit && this.props.onSubmit(inputJSON);
  }

  /**
   * 表单重置点击事件
   */
  formResetHandler = () => {
    // 重置表单数据为初始值
    this.props.form.resetFields();
    // 通知只能组件更新状态
    !!this.props.onReset && this.props.onReset();
  }

}

export default Form.create({})(Index)
